<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css"/>
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #FFFFFF;min-height: 100vh;font-size: 0.373rem;
			}
			ul, ol { list-style:none; } 
			body input[type='text'],ul,li{padding: 0;margin: 0;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			.bj_content{padding:0 0.13rem;background: #fff;}
			.bj_content .p .like span{margin: 0;}
			.bj_content .like i{color:#1d83fc;font-size: 0.55rem;margin-right: 0.1rem;}
			.bj_content img{max-width: 100%;}
			.bj_content .p{display: flex;justify-content: space-between;height: 1.6rem;
    line-height: 1.6rem;font-size: 0.4rem;}
			.bj_content .p span{margin: 0 0.2rem;display: flex;align-items: center;}
 			.bd_xjxq_img{height:10rem ;}
 			.bd_xjxq_img video{height:100% ;width: 100%;}
 			.bd_xjxq{background: #FFFFFF;}
 			.bd_xjxq_cont{padding: 0.4rem;}
 			.bd_xjxq_cont_h3{font-size: 0.426rem;text-align: center;}
 			.bd_xjxq_cont_data{font-size: 0.373rem;text-align: center;width: 100%;display: block;}
 			.bd_xjxq_input_title{display: block;line-height: 1rem;font-size: 0.426rem;padding: 0 0.4rem;}    
 			.bd_xjxq_input_xuan span{color: #8f8f94;padding: 0.1rem 0.2rem;border-radius: 0.1rem;margin: 0 0.3rem 0.3rem 0;display: inline-block;border: 1px solid #8f8f94;}
 			.bd_xjxq_input_xuan .active{color: #1383ff;border: 1px solid #1383ff;}
 			.bd_xjxq_but{width: 40%;border-radius: 0.1rem;margin: 0.5rem auto;display: block;background: #1383ff;color: #fff;border: 0;}
 			.bd_xjxq_input_xuan{padding: 0 0.4rem;}
 			.bj_content .title{background: #fff;text-align: center;line-height: 2;font-size: 0.4rem;font-weight: bold;}
		</style>
	</head>


	<body>
	<div id="app">
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">{{html.name}}</h1>
		</header>
		<div class="bj_content mui-content">
			<div class="p">
				<span v-html="html.createtime"></span><span>浏览量：{{html.scan}}人</span><span class="like" style="display: none;"><i  :class="html.no"  @click="like()"></i><span >{{html.collectnum}}人收藏</span></span>
			</div>
			<!--富文本内容-->
 			<div class="bd_xjxq" id="bd_xjxq" v-html="html.content"></div>
 			<div class="bd_xjxq_input" v-show="menuItem.length == 0?false:true">
				<span class="bd_xjxq_input_title">请投最好的一位</span>
				<div class="bd_xjxq_input_xuan">
					<span :class="item.checked == true ? 'active':''" @click="changeActive(i)" v-for="(item,i) in menuItem">{{item.name}}</span>
					
				</div>
				<button class="bd_xjxq_but" @click="subbtn">提交</button>
			</div>
		</div>
	</div>	
	</body>

</html>
<script src="../js/mui.min.js"></script>
<script src="../js/js.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script type="text/javascript">
	mui.init();
	//mui.previewImage();
	var address = Storage.get('address');
	if (Storage.get('user') == null || Storage.get('user') == undefined) {
		var user = 0;
	}else{
		var user = Storage.get('user');
	}
	
	//mui.previewImage();
	var vue = new Vue({
        el: '#app',
        data: {
        	menuItem:[
//      	{checked:true,name:'选择一'},
//      	{checked:false,name:'选择二'},
//      	{checked:false,name:'选择三'}
        	],
        	html:'',
        	checkedid:''
        },
        methods:{
        	//投票
        	changeActive:function(i){
        		var list = vue.menuItem
        		mui.each(vue.menuItem,function(o,v){
                    v.checked=false
                })
        		list[i].checked = true
        		vue.checkedid = list[i].id
        	},
          	like:function(){
          		if (Storage.get('user') == null || Storage.get('user') == undefined) {
					mui.toast('未登录，请先登录',{ duration:'long', type:'div' })
				}else{
					mui.post(url+"api/article/modelCollect",{
	              		uid:user.uid,type:vue.html.types,vid:vue.html.id,sqid:address.sqid
	              	},function(data){
	              		if (data == 1) {
	              			vue.html.no = 'mui-icon-extra mui-icon-extra-heart-filled'
	              			vue.html.collectnum = vue.html.collectnum + 1
	              			mui.toast('收藏成功',{ duration:'long', type:'div' })
	              		}else{
	              			vue.html.no = 'mui-icon-extra mui-icon-extra-heart'
	              			vue.html.collectnum = vue.html.collectnum -1
	              			mui.toast('取消收藏',{ duration:'long', type:'div' })
	              		}
	//					console.log(vue.list_con[i].no,'----')
	            	},'json');
				}

            	
                //this.classe='mui-icon-extra mui-icon-extra-heart-filled'
                //console.log(this.class)
            },
        	//提交
        	subbtn:function(){
        		//console.log(user)
        		if(user == undefined || user == '' || user == null){
        			mui.toast('未登录，请先登录',{ duration:'long', type:'div' })
        		}else{
        			if(!vue.checkedid){
        				mui.toast('请选择投票',{ duration:'long', type:'div' })
        			}else{
        				mui.post(url+"api/system/voteing",{
		              		uid:user.uid,vcid:vue.checkedid,msgid:vue.html.id,type:type[0]
		              	},function(data){
		              		var json = JSON.parse(data);
		              		if(json.code == 0){
		              			mui.toast('已参加过投票',{ duration:'long', type:'div' })
		              		}else{
		              			mui.toast('投票成功',{ duration:'long', type:'div' })
		              		}
		              		console.log(json)
		              	},'json');
        			}
        			
        		}
        		
        	}
        }
    })
	//截取url参数
	var href = location.href;
    var id = href.split("=")[1].split("&");
    var type = href.split("=")[2].split("&");
    var status = href.split("=")[3].split("&");
    var types = href.split("=")[4].split("&");
    //console.log(types);
//  console.log(id);
	mui.post(url+"api/system/detailModel",{
  		id:id[0],type:type[0],uid:user.uid,types:types[0]
  	},function(data){
  		
  		var data = JSON.parse(data);
  		console.log(data)
  		//判断是否收藏
  		if (data.sss.status == 0) {
  			data.sss.no = 'mui-icon-extra mui-icon-extra-heart'
  		} else{
  			data.sss.no = 'mui-icon-extra mui-icon-extra-heart-filled'
  		}
  		//判断是否有投票
  		console.log(data.sss.vote,'data.sss.vote')
  		if(data.sss.vote == '' || data.sss.vote == undefined || data.sss.vote == null){
			
  		}else{
  			if (data.sss.vote.length > 0) {
	  			var json = data.sss.vote;
	  			var list = [];
	  			for (var i = 0; i < json.length; i++) {
	  				list.push({name:json[i].name,id:json[i].id,checked:''})
	  			}
	  			vue.menuItem = list
	  		}
  		}
  		vue.html = data.sss
  		vue.html.scan = vue.html.scan +1
  		
  		//var div = document.createElement('img').setAttribute('data-preview-group','1')
		//document.querySelector('img').setAttribute('data-preview-group','1')
//		console.log(div.length)
//		for (var i = 0; i < div.length; i++) {
//			console.log(i)
//		}
//		console.log(div)
//		var div = document.getElementByTagName('img')
//		dome.getAttribute('data-preview-group','1')
  		//vue.html.no = ''
	},'json');
	console.log(user.uid)
</script>